<template>
    <div id="AlikeDetailsView">
		<div class="details-view">
			<div v-for="(item, index) in info.navList" :key="index" >
				<div @click="clickEvent(index)" :class="item.isSel ? 'clickBg' : ''">{{item.name}}</div>
			</div>
		</div>
		<div v-if="navIndex == 0" class="list-view">
			<div v-if="info.txtlist.length > 0" class="list" v-for="(item, index) in info.txtlist" :key="index">
				<div class="r-1">{{item.name}}</div>
				<div class="r-2 flex align-items">
					<div>{{item.value}}</div>
					<div v-if="item.img" class="icon-view"><img :src="item.img" alt="" /></div>
				</div>
			</div>
			<div v-if="info.txtlist.length == 0" class="center">
				<img class="nothing" src="../assets/images/nothing.png" alt="" />
			</div>

		</div>
		<div v-if="navIndex == 1">
			<el-carousel :interval="5000" arrow="always"  >
			    <el-carousel-item v-for="(item, index) in info.imgList" :key="index" class="carousel-view" >
			      <img class="carousel-img" :src="item.img" alt="" />
			    </el-carousel-item>
			  </el-carousel>

		</div>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
		// props:['info','navList'],
		props: {
			info: {
				type: Array,
				default () {
					return []
				}
			},
		},
        data() {
            return {
				navIndex: 0,
				imgUrl: '',
            }
        },
        mounted() {

        },
		methods: {
			clickEvent(index) {
				this.navIndex = index
				for(let i = 0; i < this.info.navList.length; i++) {
					this.info.navList[i].isSel = i == index
				}


			},
			carouselEvent(url) {
				this.imgUrl = url
			},
		}
    }
</script>

<style lang="less"  rel="stylesheet/less">
#AlikeDetailsView {
	.el-carousel__container {
		height: 230px*@ratio!important;

	}
	.carousel-img {
		width: 100%;
		height: 230px*@ratio;
	}
	.details-view {
		width: 100%;
		height: 30px*@ratio;
        background-image: linear-gradient(to bottom right,#223241,#081522);
		display: flex;
		line-height:30px*@ratio;
		text-align: center;
		div {
			width: 100px*@ratio;
			height: 100%;
			font-size: 12px*@ratio;
			color: rgba(255,255,255,.6);
            background-color: #091622;
		}
		.clickBg {
            color: white;
		}
	}
	.list-view {
		height: 260px*@ratio;
		display: block;
		overflow-y: auto;

	}
	.carousel-view {
		height: 230px*@ratio;
		padding: 30px*@ratio 30px*@ratio;
	}
	.nothing {
		width: 150px*@ratio;
		height: 80px*@ratio;

	}
	.center {
		width: 100%;
		height: 100%;
		display: flex;
		/*水平居中*/
		justify-content: center;
		/*垂直居中*/
		align-items: center;
	}
	.flex {
		display: flex;
	}
	.align-items {
		align-items: center;
	}
	.icon-view {
		margin-left: 20px*@ratio;
	}
	.list {
		width: 90%;
		display: flex;
		align-items: center;
		margin: 0 20px*@ratio;
		height: 35px*@ratio;
		border-bottom: 1px*@ratio dashed #3b4d61;
		color: rgba(2,240,244, 0.8);
		font-size: 12px*@ratio;
		.r-1 {
			width: 30%;
		}
	}
	*::-webkit-scrollbar{
	    width: 0;height: 0;
	}
}
</style>
